<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>底部栏</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        footer {
            width: 100%;
            height: 1.1rem;
            font-size: 0.22rem;
            color: #999999;
            background-color: #ffffff;
            z-index: 1000;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: "微软雅黑";
            display: flex;
            display: -webkit-flex;
            padding-bottom: 0.1rem;
            box-sizing: border-box;
            overflow: hidden;
        }

        .footer-nav {
            width: 100%;
            height: 1.1rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-around;
            -webkit-justify-content: space-around;
            align-items: center;
            -webkit-align-items: center;
            border-top: 1px solid#eeeeee;
            box-sizing: border-box;
            overflow: hidden;
        }

        .footer-nav li {
            display: inline-block;
            height: 1.1rem;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            -webkit-flex-direction: column;
            justify-content: center;
            -webkit-justify-content: center;
            align-items: center;
            -webkit-align-items: center;
            box-sizing: border-box;
        }

        .footer-nav li img {
            width: 0.38rem;
            height: 0.44rem;
            margin-bottom: 0.1rem;
        }
    </style>
</head>

<body>
    <footer id="footer">
        <ul class="footer-nav">
            <li data-flag="indexpage" class="tab_active">
                <img src="../../image/homepage_inx.png" alt="" style="width: 0.5rem;height: 0.5rem;">
                <span style="color: #fabf38">
                    首页
                </span>
            </li>
            <li data-flag="orinpage">
                <img src="../../image/wakuangx.png" alt="" style="width: 0.5rem;height: 0.5rem;">
                <span>
                    市场
                </span>
            </li>
            <li data-flag="newflash">
                <img src="../../image/kuaixunx.png" alt="" style="width: 0.5rem;height: 0.5rem;">
                <span>
                    发现
                </span>
            </li>
            <li data-flag="minepage">
                <img src="../../image/minex.png" alt="" style="width: 0.5rem;height: 0.5rem;">
                <span>
                    我的
                </span>
            </li>
        </ul>
    </footer>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            if (app.isiPhone10) {
                $("footer").css("padding-bottom", "25px");
            }
            var handler = null;
            var curPageIndex = 0;
            var curPageName = "indexpage";
            // tab索引表
            var tabIds = {
                indexpage: 0,
                orinpage: 1,
                newflash: 2,
                minepage: 3
            };
            // 主要页面管理（默认已创建首页）
            var mainPages = ["indexpage"];
            // tab图标索引
            var urlPre = "../../image/";
            var urlFix = ".png";
            var icons = [
                ["homepagex", "homepage_inx"],
                ["wakuangx", "wakuang_inx"],
                ["kuaixunx", "kuaixun_inx"],
                ["minex", "mine_inx"]
            ];
            // tab切换
            function handleSwitch(index, flag) {
                if (!flag || flag == undefined) {
                    return
                }
                app.closeF('power_math');
                $(".footer-nav").find("span").css({
                    color: "#b3b3b3"
                });
                $(".footer-nav li").eq(index).find("span").css({
                    color: "#fabf38"
                });
                curPageIndex = index;
                curPageName = flag;
                if (flag == "indexpage") {
                    curPageIndex = 0;
                } else if (flag == "orinpage") {
                    curPageIndex = 1;
                } else if (flag == "newflash") {
                    curPageIndex = 2;
                } else if (flag == "minepage") {
                    curPageIndex = 3;
                }
                $(".footer-nav li").each(function () {
                    var index2 = $(this).index();
                    var newImg = new Image();
                    if (index != index2) {
                        newImg.src = urlPre + icons[index2][0] + urlFix;
                        $(this).find("img").attr("src", newImg.src);
                    } else {
                        newImg.src = urlPre + icons[index2][1] + urlFix;
                        $(this).find("img").attr("src", urlPre + icons[index2][1] + urlFix);
                    }
                });
                // 隐藏其他页面
                for (var i = 0; i < mainPages.length; i++) {
                    if (flag == mainPages[i]) {
                        app.showFrame(flag);
                    } else {
                        app.hideFrame(mainPages[i]);
                    }
                }
                app.setStorage("pageMainIndex", curPageIndex);
            }
            // // 处理点击tab
            $(".footer-nav li").click(function () {
                app.closeF('power_math');
                var flag = $(this).data("flag");
                if (flag == "minepage" || flag == "orinpage") {
                    // 判断用户是否已登录
                    if (app.isLogin() == false) {
                        // 跳转登录页面
                        app.toastDefi("该操作需要登录");
                        app.goLogin();
                        return;
                    }
                }
                $(".footer-nav li").children("span").css({ color: "#b3b3b3" });
                $(this).children("span").css({ color: "#fabf38" });
                curPageName = flag;
                // 处理选中样式
                if (!$(this).hasClass("aui-active")) {
                    var index = $(this).index();
                    curPageIndex = index;
                    $(".footer-nav li").each(function () {
                        var index2 = $(this).index();
                        if (index != index2) {
                            $(this).find("img").attr("src", urlPre + icons[index2][0] + urlFix);
                        } else {
                            $(this).find("img").attr("src", urlPre + icons[index2][1] + urlFix);
                        }
                    });
                }
                // 判断是否已经创建了页面
                if (mainPages.indexOf(flag) < 0) {
                    app.createMain(flag);
                    mainPages.push(flag);
                }
                // 隐藏其他页面
                for (var i = 0; i < mainPages.length; i++) {
                    if (flag == mainPages[i]) {
                        app.showFrame(flag);
                        app.setStorage("pageMainIndex", i);
                    } else {
                        app.hideFrame(mainPages[i]);
                    }
                }
                if (flag == "indexpage") {
                    app.trigger("toPageIndex");
                }
                if (flag == 'orinpage') {
                    app.trigger('toOne');
                    var chooseItem = {
                        transStatus: "",
                        payMethod: "",
                        worktype: ""
                    };
                    app.setStorage("orinDialogChoose", chooseItem);
                    var openFrameHeight = app.accMul(1.8, document.getElementsByTagName("html")[0].style.fontSize.replace('px', ''));
                    app.openFrame({
                        name: "rhead",
                        url: app.hd + "mainpage/reader.html",
                        bgColor: "rgba(0,0,0,0)",
                        rect: {
                            x: 0,
                            y: app.hH,
                            w: app.W,
                            h: 120
                        }
                    });
                    setTimeout(function () {
                        app.trigger("reloadOrin");
                    }, 300)
                } else {
                    app.closeF("rhead");
                    app.closeF("orin_dialog");
                    app.closeF("orintime");
                    app.closeF("power_index");
                }
                if (flag == 'newflash') {
                    app.openFrame({
                        name: "newsheader",
                        url: app.hd + "mainpage/newsheader.html",
                        bgColor: "rgba(0,0,0,0)",
                        rect: {
                            x: 0,
                            y: app.hH,
                            w: app.W,
                            h: 52
                        }
                    });
                    setTimeout(function () {
                        app.trigger("reloadNews");
                    }, 300)
                } else {
                    app.closeF("newsheader");
                }
                if (flag == "minepage") {
                    app.openFrame({
                        name: "mine_header",
                        url: app.hd + "mainpage/mine_header.html",
                        bgColor: "rgba(0,0,0,0)",
                        rect: {
                            x: 0,
                            y: app.hH,
                            w: app.W,
                            h: 50
                        }
                    });
                } else {
                    app.closeF("mine_header");
                }
                if (flag == "mine" && app.getSyncStorage("openMinePage") == "true") {
                    app.openFrame({
                        name: "minedialog",
                        url: app.hd + "main/minedialog.html",
                        bgColor: "rgba(0,0,0,0)",
                        rect: {
                            x: 0,
                            y: 0,
                            w: app.W,
                            h: app.H
                        }
                    });
                    app.toFront("minedialog");
                }
            });
            // // 监听登录成功
            app.listen("login_success", function () {
                app.log("index_login_success", "index监听到登录成功");
                app.setStorage("curWin", "");
            });
            app.listen("retart", function () {
                app.log("监听到app重启消息！");
                // 立即重启
                app.tout(500, function () {
                    app.restart();
                });
            });
            // 监听退出登录
            app.listen("quit_login", function () {
                var matrixLock = api.require("matrixLock");
                matrixLock.clearGesture();
                app.delAccount();
                if (handler) {
                    handler.stop();
                }
                app.bhpayIsLine("false");
                handleSwitch(0, "index");
                $(".footer-nav li").eq(0).click()
                app.toMainWin();
            });
            var orinPage = ["goTranfer", "go_rentMachine"];//监听回到市场列表
            app.listen(orinPage, function () {
                handleSwitch(1, "orinpage");
                app.toMainWin();
            });
            //监听回到市场列表
            app.listen("go_machineList", function (ret) {
                app.trigger("win_appear", {
                    value: 'index',
                    rentList: true
                });
            });
            // 监听窗口关闭事件（解决android兼容性问题）
            app.listen(["win_appear"], function (ret) {
                if (ret.value.rentList) {
                    app.toWin("root");
                    $(".footer-nav li").eq(1).click();
                    if (app.ST == 'ios') {
                        setTimeout(function () {
                            $(".footer-nav li").eq(1).click();
                        }, 200)
                    }
                    return;
                }
                if (ret.value == "index") {
                    // 复位选
                    // handleSwitch(tabIds[curPageName], curPageName);
                }
            });
            app.listen("goMain", function () {
                app.toMainWin();
                setTimeout(function () {
                    $(".footer-nav li").eq(3).click();
                    app.toWin("root");
                }, 500);
            });
            app.listen("quithandLine", function () {
                var matrixLock = api.require("matrixLock");
                matrixLock.clearGesture();
            });
            // 监听登录页面点击关闭
            app.listen("backFirst", function () {
                setTimeout(function () {
                    $(".footer-nav li").eq(0).click();
                    app.toWin("root");
                }, 500);
            });
            // 监听安卓手机返回键
            app.back(function () {
                app.setStorage("curWin", "");
                api.toLauncher();
            });
            //监听在首页的时候，后台回到app刷新
            app.resume(function () {
                app.setStorage("curWin", "");
                if (curPageIndex == 3) {
                    app.trigger("toPageMine");
                }
                if (curPageIndex == 0) {
                    app.trigger("toPageIndex");
                }
            });
            api.addEventListener({
                name: 'appintent'
            }, function (ret, err) {
                if (ret) {
                    if (JSON.stringify(ret.appParam) == "{}") {
                        var getPage = app.getTargetnew(ret.iosUrl);
                        if (getPage.urlScheme && getPage.urlScheme == "goMain") {
                            app.toMainWin();
                            setTimeout(function () {
                                $(".footer-nav li").eq(3).click();
                                app.toWin("root");
                            }, 500);
                        }
                    }
                    if (ret.appParam && ret.appParam.urlScheme == "openOutcoinPage" && ret.appParam.isAddAccountSucc == "no") {
                        app.closeW("browser_headerwin");
                    }
                    if (ret.appParam && ret.appParam.urlScheme == "openOutcoinPage" && ret.appParam.isAddAccountSucc == "yes") {
                        var cointypecontract = {
                            page: "common/headerwin",
                            name: "relateaccount_headerwin",
                            param: {
                                subpage: "mine/relateaccount",
                                name: "relateaccount",
                                title: "关联BHPAY账户"
                            }
                        };
                        var recoinNumber = JSON.stringify(cointypecontract);
                        app.goPushPage(recoinNumber);
                    }
                }
            });
        };

    </script>
</body>

</html>